<template>
	<view class="next-list">
		<view class="tops">
			<view class="next-search">
				<image class="next-search-img" src="../static/search.png" mode=""></image>
				<input class="next-input" @input="search" v-model="searchStr" placeholder="搜索" maxlength="50"
					placeholder-class="next-placeholder" />
			</view>
			<view class="city">
				<image src="../static/icon/xdw.png" mode=""></image>
				<view class="">
					当前定位城市<span>{{nowcity.city}}</span>
				</view>
			</view>
		</view>
		<scroll-view @scroll="scrollCallback" class="next-scroll-left" scroll-y="true" :scroll-with-animation="false"
			:scroll-into-view="scrollIntoView">
			<view class="hotcity" id="TOP">
				<view class="tit">
					热门城市
				</view>
				<view class="cityflex">
					<view class="items" v-for="(item,index) in hotList" :key="index" @click="chooseItem(item)">
						<view class="">
							{{item.value}}
						</view>
					</view>
				</view>
			</view>
			<view class="left-list" v-for="(item,index) of scrollLeftObj" :key="index" :id="index!='#'?index:'BOTTOM'">
				<view :id="`item_${index}`">
					<view class="left-item-title" v-if="item && item.length">{{index}}</view>
					<view class="left-item-card" v-for="(mess,inx) in item" :key="inx" @click.stop="chooseItem(mess)">
						<view class="left-item-card-info"
							:style="inx<item.length-1?'border-bottom: solid #F4F4F4 1rpx;':''">
							<view class="left-item-card-name">{{mess[nameKey] || ''}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="no-data" v-if="!hasData">
				<image class="no-data-img" src="../static/icon/ddw.png" mode=""></image>
				<view class="no-data-name">请重新搜索</view>
			</view>
		</scroll-view>
		<view class="next-scroll-right" v-if="hasData">
			<uni-icons type="arrow-up" class="next-scroll-right-top" @click.stop="scrollTop"></uni-icons>
			<view class="next-scroll-right-name"
				:class="{'next-scroll-right-select':(item==scrollIntoViewCopy && scrollIntoView !='TOP')}"
				v-for="(item,index) in scrollRightList" :key="index" @click.stop="chooseType(item)">{{item}}

			</view>
		</view>
	</view>
</template>

<script>
		import QQMapwx from '@/minxins/amap-wx.130.js'
	import region from '@/common/ChinaCitys.json';
	import pinyin from './js-pinyin/dist/pinyin.js'
	// 创建pinyin实例
	const pinyinInstance = new pinyin({
		charCase: 0
	})
	const position = {}
	export default {
		props: {
			nameKey: {
				type: String,
				default: 'value'
			},
			isInterlock: {
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				nowcity: uni.getStorageSync('address'),
				searchStr: '',
				scrollIntoView: 'TOP',
				scrollIntoViewCopy: '',
				scrollLeftObj: {},
				oldObj: {},
				scrollRightList: [],
				hasData: true,
				friends: 0,
				topHeight: 0,
				windowHeight: '',
				dataList: [],
				hotList: [{
						value: '北京市'
					},
					{
						value: '上海市'
					},
					{
						value: '广州市'
					},
					{
						value: '深圳市'
					},
					{
						value: '长沙市'
					},
					{
						value: '成都市'
					},
					{
						value: '重庆市'
					},
					{
						value: '杭州市'
					},
					{
						value: '西安市'
					},
					{
						value: '南京市'
					},
					{
						value: '天津市'
					},
					{
						value: '郑州市'
					},
				]
			};
		},
		created() {
			let that = this
			region.forEach((item) => {
				item.children.forEach(city => {
					that.dataList.push({
						value: city.value,
						code: city.code
					})
				})
			})
			if (that.dataList.length != 0) {
				that.$watch(() => that.dataList, (newList) => {
					that.friends = that.dataList.length
					if (newList && newList.length) that.cleanData(newList)
					if (that.isInterlock) {
						that.$nextTick(() => {
							uni.getSystemInfo({
								success: function(res) {
									that.windowHeight = res.windowHeight + 'px'
								}
							});
							Object.keys(that.scrollRightList).map(key => {
								const query = uni.createSelectorQuery().in(that).select(
									`#item_${that.scrollRightList[key]}`);
								query.boundingClientRect(res => {
									const {
										bottom
									} = res
									position[that.scrollRightList[key]] = bottom
								}).exec()
							})
						})
					}
				}, {
					immediate: true,
					deep: true,
				})
			}

		},
		methods: {
			getlength(object) {
				let data = [object];
				data.forEach((item, index) => {
					for (const key in item) {
						if (item[key].length) {
							this.friends = item[key].length
						}
					}
				})
			},
			search() {
				if (this.searchStr) {
					let has = false
					this.scrollLeftObj = JSON.parse(JSON.stringify(this.oldObj))
					for (let i in this.scrollLeftObj) {
						this.scrollLeftObj[i] = this.scrollLeftObj[i].filter(item => {
							return (item[this.nameKey].indexOf(this.searchStr) != -1)
						})
						if (this.scrollLeftObj[i].length) has = true
					}
					if (has) this.hasData = true
					else this.hasData = false
					this.getlength(this.scrollLeftObj)
				} else {
					this.hasData = true
					this.scrollLeftObj = JSON.parse(JSON.stringify(this.oldObj))
					this.friends = this.dataList.length
				}

			},
			scrollCallback(e) {
				const getOneHeight = uni.createSelectorQuery().in(this).select(
					`#item_${this.scrollRightList[0]}`);
				getOneHeight.boundingClientRect(res => {
					this.topHeight = res.top
				}).exec()
				const {
					detail
				} = e
				const {
					scrollTop,
					scrollHeight
				} = detail
				if (this.scrollIntoView === 'TOP') {
					this.scrollIntoView = ''
				}
				if (this.isInterlock) {
					for (let key in position) {
						if (position[key] > scrollTop + 110 && position[key] - scrollTop <= scrollHeight) {
							this.scrollIntoViewCopy = key
							return
						}
					}
				}
			},
			scrollTop() {
				setTimeout(() => {
					this.scrollIntoView = 'TOP'
					this.scrollIntoViewCopy = 'TOP'
				}, 50)
			},
			cleanData(list) {
				this.scrollRightList = this.getLetter()
				let newList = []
				list.forEach(res => {
					let initial = pinyinInstance.getCamelChars(res.value.trim())
					let firsfirs = initial ? initial.substring(0, 1) : ''
					if (!newList[firsfirs]) newList[firsfirs] = []
					newList[firsfirs].push({
						[this.nameKey]: res[this.nameKey].trim() || '',
					})
				})
				this.scrollRightList.forEach(t => {
					if (newList[t]) {
						this.$set(this.scrollLeftObj, t, newList[t])
					} else {
						this.$set(this.scrollLeftObj, t, [])
					}
				})
				let surplusList = []
				for (var i in newList) {
					let han = this.scrollRightList.find(v => {
						return v == i
					})
					if (!han) surplusList.push(newList[i])
				}
				surplusList.forEach(item => {
					this.$set(this.scrollLeftObj, '#', item)
				})
				this.oldObj = JSON.parse(JSON.stringify(this.scrollLeftObj))

				// 过滤不存在的关键索引
				const existList = Object.keys(this.scrollLeftObj).filter(key => {
					return this.scrollLeftObj[key].length
				})
				this.scrollRightList = this.scrollRightList.filter(key => {
					return existList.some(k => k === key)
				})
			},
			getLetter() {
				let list = []
				for (var i = 0; i < 26; i++) {
					list.push(String.fromCharCode(65 + i))
				}
				list.push('#')
				return list
			},
			chooseType(item) {
				if (item == '#') item = 'BOTTOM'
				setTimeout(() => {
					this.scrollIntoView = item
					this.scrollIntoViewCopy = item
				}, 50)
			},
			chooseItem(item) {
				console.log(item);
				const qqmapsdk = new QQMapwx.AMapWX({
					key: 'fec30c445693bf6e07f0c753a07d9667'
				})
				qqmapsdk.getGeo({
					options: {
						address: item,
						city: item
					},
					success: (res) => {
						let arr = res.geocodes[0].location
						console.log(res,arr);
						qqmapsdk.getRegeo({
							location:arr,
							success: (ress) => {
								console.log(ress);
								let u = ress[0].regeocodeData.addressComponent
								let obj = {
									address: u.streetNumber.street + u.streetNumber.number,
									longitude: ress[0].longitude,
									latitude: ress[0].latitude,
									province: u.province,
									city: u.city.length == 0 ? u.province : u.city,
								}
								uni.setStorageSync('address', obj)
								uni.navigateBack({
									delta: 1
								})
							},
							fail: function(error) {
								console.error(error);
							}
						})
					},
					fail: function(error) {
						console.error(error);
					}
				})
			
			}
		},
	};
</script>
<style>
	/deep/ ::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
		display: none;
	}
</style>
<style lang="scss" scoped>
	.texts {
		color: #777777;
		text-align: center;
		line-height: 100rpx;
		font-size: 26rpx;
	}

	.next-list {
		width: 100%;
		box-sizing: border-box;
		background: #FBFBFB;

		.tops {
			width: 750rpx;
			height: 202rpx;
			background: #FFFFFF;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			padding: 40rpx 20rpx 0rpx 20rpx;
			box-sizing: border-box;

			.next-search {
				width: 710rpx;
				height: 80rpx;
				background: #FBFBFB;
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				padding: 16rpx 22rpx;
				box-sizing: border-box;

				.next-search-img {
					width: 48rpx;
					height: 48rpx;
				}

				.next-input {
					padding-left: 10rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
				}

				.next-placeholder {
					color: #D9D9D9;
				}
			}

			.city {
				display: flex;
				align-items: center;
				margin-top: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}

				span {
					margin-left: 20rpx;
				}
			}
		}

		.next-scroll-left {
			width: 710rpx;
			height: 80vh;
			margin: 20rpx auto;
			box-sizing: border-box;

			.hotcity {
				width: 710rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 22rpx 0rpx 22rpx 20rpx;
				box-sizing: border-box;

				.tit {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
				}

				.cityflex {
					display: flex;
					flex-wrap: wrap;
					margin-top: 20rpx;

					.items {
						width: 160rpx;
						height: 60rpx;
						background: #FAFAFA;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #000000;
						text-align: center;
						line-height: 60rpx;
						margin-right: 10rpx;
						margin-bottom: 20rpx;
					}
				}

			}

			.left-list {
				border-radius: 20rpx;
				margin-top: 20rpx;

				.left-item-title {
					width: calc(100% - 24rpx);
					height: 60rpx;
					padding-left: 24rpx;
					text-align: left;
					line-height: 60rpx;
					font-size: 30rpx;
					color: #666666;
					background-color: #FFFFFF;
				}

				.left-item-card {
					width: 100%;
					background-color: #FFFFFF;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					height: 80rpx;

					.left-item-card-info {
						width: 100%;
						height: 100%;
						display: flex;
						align-items: flex-start;
						justify-content: center;
						flex-direction: column;
						padding-left: 20rpx;

						.left-item-card-name {
							font-size: 30rpx;
							line-height: 30rpx;
							color: #333333;
						}

						.left-item-card-phone {
							margin-top: 14rpx;
							font-size: 28rpx;
							line-height: 28rpx;
							color: #999999;
						}
					}
				}
			}

			.no-data {
				width: 100%;
				margin-top: 100rpx;
				text-align: center;

				.no-data-img {
					width: 200rpx;
					height: 200rpx;
				}

				.no-data-name {
					margin-top: 20rpx;
					font-size: 28rpx;
					color: #666666;
				}
			}
		}

		.next-scroll-right {
			position: fixed;
			right: 0rpx;
			top: 50%;
			transform: translateY(-47%);
			z-index: 999 !important;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.next-scroll-right-top {
				font-size: 22rpx;
				margin-right: 10rpx;
				z-index: 999 !important;
			}

			.next-scroll-right-name {
				width: 32rpx;
				padding-right: 10rpx;
				height: 32rpx;
				font-size: 22rpx;
				color: #333333;
				line-height: 28rpx;
				margin-top: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
			}

			.next-scroll-right-select {
				padding: 0;
				margin-right: 10rpx;
				width: 32rpx;
				height: 32rpx;
				border-radius: 50%;
				background: #29A85C;
				color: #FFFFFF;
			}
		}
	}
</style>